<template>
  <div class="service-package-details">
    <!-- 顶部标题 -->
    <div class="top">
      <div></div>
      <span>服务包详情</span>
    </div>

    <!-- 中间部分 -->
    <div class="middle1 clearfix">
      <div class="middle_container clearfix">
        <div class="img">
          <img src="" alt="" />
        </div>
        <div class="left">
          <div class="title">
            <h3>老人服务包</h3>
            <span>基础包</span>
          </div>
          <div class="price">
            <p>价格：</p>
            <span>129.00￥</span>
          </div>
          <div class="label">
            <p>标签：</p>
            <span>慢病管理</span>
            <span>中医服务</span>
          </div>
          <div class="user">
            <p>服务对象：</p>
            <span>55岁以上的老人</span>
          </div>
          <div class="signing-time">
            <p>签约周期：</p>
            <span>一年以上</span>
          </div>
          <div class="service-title">
            <p>服务介绍：</p>
            <span>
              主要以基本医疗服务和公共卫生服务为主， 如部分常见病或
              多发病的治疗和用药指导、
              重症的就医指导和转诊预约、居民健康档案的管 理和 慢病管理指导等
            </span>
          </div>
        </div>
      </div>

      <!-- 服务项目 -->
      <div class="middle_middle clearfix">
        <div class="title02">服务项目</div>
        <div class="table">
          <el-table
            :data="projectDate"
            style="width: 100%; background: #f9f9f9"
          >
            <el-table-column prop="id" label="项目编号" width="180" />
            <el-table-column prop="projectName" label="项目名称" width="180" />
            <el-table-column prop="timeNum" label="次数" width="180" />
            <el-table-column prop="projectType" label="类型" width="180" />
            <el-table-column prop="projectTitle" label="项目介绍" width="800" />
          </el-table>
        </div>
        <div class="form">
          <div class="title" style="height:40px">服务详情字段</div>
          <el-form
            ref="ruleFormRef"
            :model="serviceFont"
            status-icon
            label-width="120px"
            class="demo-ruleForm"
          >
            <el-form-item label="收缩压">
              <el-input
                v-model="serviceFont.ssy"
                type="text"
                autocomplete="off"
              />
            </el-form-item>
            <el-form-item label="舒张压">
              <el-input
                v-model="serviceFont.szy"
                type="text"
                autocomplete="off"
              />
            </el-form-item>
            <el-form-item label="症状">
              <el-input
                v-model="serviceFont.zz"
                type="text"
                autocomplete="off"
              />
            </el-form-item>
            <el-form-item label="健康指导">
              <el-input
                v-model="serviceFont.jkzd"
                type="text"
                autocomplete="off"
              />
            </el-form-item>
            <el-form-item label="备注">
              <el-input
                v-model="serviceFont.bz"
                type="text"
                autocomplete="off"
              />
            </el-form-item>
            
          </el-form>
        </div>
      </div>
    </div>

    <div class="footer">
      <el-button type="primary" @click="toNewAddServicePackage">编辑</el-button>
      <el-button type="success">审核通过</el-button>
      <el-button type="danger">驳回</el-button>
      <el-button plain @click="toServicePackageManagement">返回</el-button>
    </div>
    <!-- 这是大盒子的尾部 -->
  </div>
</template>

<script>
export default {
  name: "ServicePackageDetails",
  data() {
    return {
      projectDate: [
        {
          id: Math.random() + 1,
          projectName: "心脑血管",
          timeNum: 2,
          projectType: Math.random() < 0.5,
          projectPrice: 3,
          projectTitle: "hajksdhf" + 1,
        },
      ],
      serviceFont: {
        szy: '',
        ssy: '',
        zz: '',
        jkzd: '',
        bz: '',
      },
    };
  },
  methods: {
    toServicePackageManagement () {
      this.$router.push('/data-management/service-pack-management')
    },
    toNewAddServicePackage () {
      this.$router.push('/data-management/new-add-service-package')
    }
  },
};
</script>

<style lang="less" scoped>
.clearfix::after {
  display: block;
  content: "";
  clear: both;
  height: 0;
}
.service-package-details {
  background: #fff;
  padding: 20px;
  .top {
    padding: 10px;
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 22px;
    margin-top: 10px;
    div {
      width: 5px;
      height: 25px;
      background: blue;
      border-radius: 5px;
      margin-right: 10px;
    }
  }
  .middle1 {
    width: 97%;
    padding: 20px;
    .middle_container {
      background: #f2f7fb;
      .img {
        width: 400px;
        height: 380px;
        float: left;
        img{
          width: 100%;
          height: 100%;
        }
      }
      .left {
        width: 950px;
        height: 380px;
        float: left;
        margin-left: 100px;
        text-align: left;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        div {
          display: flex;
          align-items: center;
        }
        .title {
          h3 {
            float: left;
            font-weight: 400;
            font-size: 24px;
          }
        }
        p {
          float: left;
          width: 100px;
          font-size: 14px;
          color: #999999;
        }
        span {
          margin-left: 10px;
          font-size: 14px;
        }
      }
    }

    .middle_middle {
      width: 100%;
      float: left;
      margin: 30px 0 0 0;
      .title02 {
        width: 100%;
        height: 60px;
        font-size: 18px;
        float: left;
        line-height: 60px;
        text-align: left;
      }
      .table {
        text-align: left;
      }
      .form{
        margin: 30px 0 0 0;
        width: 50%;
      }
    }
  }
  .footer{
    padding: 20px;
    width: 90%;
    text-align: left;
  }
}
</style>
